<template>
  <div>
    <div style="width:1000px">
      <el-form ref="form" label-width="120px">
        <el-form-item>
          <el-button size="small" plain onclick="window.open('https://wms2.obs.cn-north-4.myhuaweicloud.com/collect.xlsx')" >下载模板</el-button>
        </el-form-item>
        <el-form-item>
          <el-upload
            v-model="form.filePath"
            ref="uploadExcel"
            :action="uploadUrl"
            :on-success="handleSuccess"
            :on-error="handleError"
            accept=".xls,.xlsx"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :before-upload="beforeUploadFile"
            :before-remove="beforeRemove"
            :on-remove="onRemove"
            :file-list="fileList"
            :headers="getAuthorization()"
          >
            <el-button size="small" plain>2.选择文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传1个模板文件(excel)，且不超过10M</div>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button @click="uploadFileView()">3.预览数据</el-button>
          <el-button type="primary" @click="sourceRelease()" :disabled="isDisable">4.导入数据</el-button>
        </el-form-item>
      </el-form>
    </div>

    <vxe-table
      ref="xTable"
      border
      resizable
      stripe
      highlight-current-row
      show-footer
      highlight-hover-row
      row-id="id"
      class="mytable-footer"
      height="500"
      :data="tableData"
      :sort-config="{ remote: true }"
      export-config
      show-overflow
      align="center"
    >
      <template v-slot:empty>
        <p> </p>
      </template>

      <vxe-table-column field="warehouseSerialNumber" title="仓库编码" min-width="120" />
      <vxe-table-column field="warehouseName" title="仓库名称" min-width="120" />
      <vxe-table-column field="shipmentSerialNumber" title="入驻商编码" min-width="120" />
      <vxe-table-column field="shipmentName" title="入驻商名称" min-width="150" />
      <vxe-table-column field="collectDept" title="领用部门" min-width="180" />
      <vxe-table-column field="typeName" title="领用类型" min-width="160" />
      <vxe-table-column field="goodCode" title="商品编码" min-width="150" />
      <vxe-table-column field="goodsName" title="商品名称" min-width="150" />
      <vxe-table-column field="goodsUnitName" title="单位" min-width="150" />
      <vxe-table-column field="unitQuantity" title="数量" min-width="100" />
      <vxe-table-column field="remarks" title="备注" min-width="150" />
    </vxe-table>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import request from '@/utils/request'

  Vue.use(VXETable);
  export default {
    data() {
      return {
        isDisable: false,
        fileList: [],
        // uploadUrl: process.env.VUE_APP_BASE_API + "arpa-tps-api/fileUpload",
        uploadUrl: this.uploadUrl,
        tableData: [],
        form: {
          filePath: "",
          isView: "2",
          type:"1",
          teamCode:"",
        }
      };
    },
    created() {
    },

    methods: {
      init() {
        this.isDisable = false,
        this.form.isView = 2;
        this.tableData = [];
        this.form.filePath = "";
        this.$refs.uploadExcel.clearFiles()
      },
      //上传文件预览
      uploadFileView() {
        if ("" == this.form.filePath) {
          return this.$message.warning("请先上传文件");
        }
        const rLoading = this.openLoading();
        request({
          url: `/wms/collect/collectView`,
          params: { filePath: this.form.filePath , type: this.form.type},
          method: "post"
        }).then(
          response => {
            this.tableData = response.data;
            this.$message({ message: response.msg, type: "success" });
            this.form.isView = 1;
          }).finally(() => {
            rLoading.close();
          })
      },
      downTemplate() {
        request({
          url: `https://wms2.obs.cn-north-4.myhuaweicloud.com/collect.xlsx`,
          method: "get"
        }).then(response => {
          window.open(response.data);
        });
      },
      //上传
      sourceRelease() {
        if ("" == this.form.filePath) {
          return this.$message.warning("请先上传文件");
        }
        if (1 != this.form.isView) {
          return this.$message.warning(
            "请先预览后，再导入数据，并且不能重复导入"
          );
        }
        this.isDisable = true;
        const rLoading = this.openLoading();
        request({
          url: `/wms/collect/collectImport`,
          method: "post"
        }).then(response => {
          this.$message({ message: response.msg, type: "success" });
          this.form.isView = 2;
          this.isDisable = false;
          this.$emit("fatherUploadMethod");
        }).finally(() => {
          rLoading.close();
        })
      },
      // 上传成功回调
      handleSuccess(res, file) {
        this.$message({ message: res.msg, type: "success" });
        console.log(res);
        this.form.filePath = res.data;
      },
      //上传前校验
      beforeUploadFile(file) {
        let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
        let size = file.size / 1024 / 1024;
        if (extension !== "xls" && extension !== "xlsx") {
          this.$message.error("只能上传excel文件");
          return false;
        }
        if (size > 10) {
          this.$message.error("上传文件大小不能超过 10MB!");
          return false;
        }
      },

      // 文件上传失败时的钩子
      handleError(err, file, fileList) {
        this.$notify.error({
          title: "错误",
          message: `文件上传失败`
        });
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`);
      },
      onRemove(file, fileList) {
        this.form.isView = 2;
        this.tableData = [];
        this.form.filePath = "";
        this.isDisable = false;
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 1 个文件，本次选择了 ${
            files.length
            } 个文件，共选择了 ${files.length + fileList.length} 个文件`
        );
      }
    }
  };
</script>
<style>
</style>
